<!DOCTYPE html>
<html>
<title>Text Property</title>
<head>  
<style type="text/css">
body{ color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc; }
pre{width:35%;float:left;display:block;margin:10px 21px;font-family:Arial;padding:10px 20px;background:#eee;border:1px dotted #000;}
pre.kanan{float:right;margin:10px 20px 10px 0;}rd{color:red;}be{color:blue;}gn{color:green;}


.showimg{
      position:relative;
      width:220px;
      height:220px;
      margin:50px;
}
.showimg img, .showimg .myteks{
      display:block;
      width:200px;
      height:200px;
      position:absolute;
      top:0;
      left:0;
      background:#ddd;
      padding:4px;
      border:6px solid #666;
      border-radius:8px;
      transition:0.8s ease-out;  
      -o-transition:0.8s ease-out;  
      -ms-transition:0.8s ease-out;  
      -moz-transition:0.8s ease-out;  
      -webkit-transition:0.8s ease-out; 
}
.showimg img{
      z-index:5;
}
.myteks{
      background:#000;
      font:normal 14px #fff;
      z-index:4;
      color:#fff;
      font:normal 14px Arial;
}
.showimg:hover img, .showimg:hover .myteks{
    
      width:200px;
      height:200px;
      position:absolute;
      top:0;
      left:0;     
}
.showimg:hover img, .showimg:hover .myteks, .showimg:hover .myteks p{
      transform:rotateY(180deg); 
      -o-transform:rotateY(180deg); 
      -ms-transform:rotateY(180deg); 
      -moz-transform:rotateY(180deg); 
      -webkit-transform:rotateY(180deg); 
}
div.showimg:hover .myteks{
      z-index:6;
      box-shadow:0px 0px 8px #000;
      background:#888;
      border-color:#eee;
      text-shadow:1px 1px 1px #000;
}
div.showimg .myteks p{
      padding:8px;
}
div.showimg .myteks p a{
      color:yellow;
      font-weight:bold;
      text-decoration:none;
}
div.showimg .myteks p a:hover{
      color:blue;      
}
</style>
</head>
<body>
<div class="showimg">
<img src="http://lh6.googleusercontent.com/-t2M6s4Lgokg/AAAAAAAAAAI/AAAAAAAAANQ/Ya2-iYupTNY/photo.jpg" />
<div class="myteks"><p>Belajar dan ...  selalu mau untuk belajar hal2 baru dg semangat & keinginan besar menghasilkan kemajuan atau sesuatu yg baru, yg baik & berarti bagi banyak orang....</p>
     <p><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></p></div>
</div>
</body> 
</html>
